<template>
	<view
		class="text-hide text-center"
		style="border-radius: 100rpx;"
		:class="[pdClass, layout === 'row' ? 'row-center bg-primary-op10 px-2-2 py-0-4' : '', extraClass || '']"
		:style="extraStyle || ''"
		hover-class="opacity-50"
		hover-start-time="0"
		hover-stay-time="0"
		@click="$emit('touch')"
	>
		<view :class="[layout === 'row' ? 'mr-1' : 'mb-1']">
			<text
				v-if="icon.indexOf('t-icon') >= 0"
				:class="[iconClass || '', 't-icon', icon]"
				:style="iconSize ? { width: iconSize + 'px',height: iconSize + 'px' } : {}"
			></text>
			<text v-else 
				:class="[iconClass || '', 'iconfont', icon]"
				:style="iconSize ? { fontSize: iconSize + 'px' } : {}">
			</text>
		</view>
		<view>
			<text class="text-xn" :class="[layout === 'row' ? 'color-primary' : 'color-main']">{{ text }}</text>
		</view>
	</view>
</template>

<script>
import { ref } from 'vue';
export default {
	props: {
		icon: {
			required: true,
			default: '',
		},
		iconClass: String,
		text: String,
		extraClass: String,
		extraStyle: String,
		pdClass: {
			default: 'py-1-3',
			type: String,
		},
		//small normal
		size: {
			default: 'normal',
			type: String,
		},
		//column row
		layout: {
			default: 'column',
			type: String,
		},
	},
	setup(props) {
		const iconSize = ref(null);
		switch (props.size) {
			case 'normal':
				iconSize.value = null;
				break;
			case 'small':
				iconSize.value = uni.upx2px(32);
				break;
		}
		return {
			iconSize,
		};
	},
};
</script>

<style></style>
